{% extends "base.html" %}

{% block title %}注册{% endblock %}
{% block head %}
    <script src="{% static 'jquery/jquery-3.7.1.min.js' %}"></script>
{#    <script src="{% static 'js/register.js' %}"></script>#}
    <script>
        $(function () {
            function bindCaptchaBtnClick() {
                $("#captcha_btn").click(function (event) {
                    //按钮转换成jquery对象
                    let $this = $(this);
                    let email = $("#email").val();
                    {#let email = $("input[name='email']").val();#}
                    //判断邮箱是否存在
                    if (!email) {
                        alert("请输入邮箱");
                        return;
                    }
                    // 取消按钮的点击事件
                    $this.off("click");
                    // 发送ajax请求
                    $.ajax('/blogauth/sendemail?email='+email,{
                        method:"GET",
                        success:function (result){
                            if (result['code'] == 200){
                                alert('验证码发送成功');
                            }else{
                                alert(result['message']);
                            };
                        },
                        fail:function (error){
                            console.log(error);
                        }
                    })
                    // 倒计时
                    let countdown = 60;
                    let timer = setInterval(function () {
                        if (countdown <= 0) {
                            $this.text('获取验证码');
                            // 清掉定时器
                            clearInterval(timer)
                            // 重新绑定点击事件
                            bindCaptchaBtnClick()
                        } else {
                            countdown--;
                            $this.text(countdown + "s")
                        }
                    }, 1000)
                })
            }
            bindCaptchaBtnClick();
        })
    </script>
{% endblock %}

{% block main %}
    <div style="max-width: 330px;" class="m-auto">
        <h1>注册</h1>
        <form action="" method="post">
        {% csrf_token %}
            <div class="mb-3">
                <label>用户名</label>
                <input type="text" name="username" class="form-control" placeholder="用户名">
            </div>
            <div class="mb-3">
                <label>邮箱</label>
                <input id="email" type="email" name="email" class="form-control" placeholder="邮箱">
            </div>
            <div class="mb-3">
                <label>验证码</label>
                <div class="input-group mb-3">
                    <input name="captcha" type="text" class="form-control" placeholder="验证码"
                           aria-label="Recipient's username" aria-describedby="basic-addon2">
                    <button type="button" class="btn btn-outline-secondary" id="captcha_btn" >获取验证码</button>
                </div>
            </div>
            <div class="mb-3">
                <label>密码</label>
                <input type="password" name="password" class="form-control" placeholder="密码">
            </div>

            <div class="mb-3">
                <button class="btn btn-primary w-100">立即注册</button>
            </div>
        </form>
    </div>
{% endblock %}